<template>
  <div>
    <div style="padding: 10px 60px 5px 60px">
      <el-form :inline="true" :model="formInline"  class="demo-form-inline">

        <div class="text">活动查询</div>
        <br/>
        <el-form-item label="活动名">
          <el-input v-model="formInline.activityName" placeholder="activityName"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" @click="onSubmit" style="width: 100px;margin: 0 20px;">查询</el-button>
          <el-button style="width: 100px;margin: 0 0px;">取消</el-button>
<!--          <el-button type="primary" @click="addactivity" style="width: 150px;margin: 0 200px;">添加新活动</el-button>-->
          <el-button type="primary" @click="dialogFormVisible = true" style="width: 150px;margin: 0 200px;">添加新活动</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="padding: 5px 30px">
      <div class="text1">查询结果</div>
      <el-table
        ref="singleTable"
        :data="tableData.slice((curPage-1)*pagesize,curPage*pagesize)"
        highlight-current-row
        @current-change="handleCurrentChange"
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          property="activityId"
          label="活动ID"
          width="180">
        </el-table-column>
        <el-table-column
          property="activityCode"
          label="活动编码"
          width="180">
        </el-table-column>
        <el-table-column
          property="activityName"
          label="活动名称"
          width="180">
        </el-table-column>
        <el-table-column
          property="startDate"
          label="开始时间"
          width="180">
        </el-table-column>
        <el-table-column
          property="endDate"
          label="结束时间"
          width="180">
        </el-table-column>
        <el-table-column
          label="查看详情">
          <template slot-scope="scope">
            <router-link  :to="{path: '/activity/searchproduct',
          query: {activityCode: scope.row.activityCode,activityName: scope.row.activityName}}">
              <el-button @click="handleEdit(scope.$index, scope.row)"
                         size="mini"
                         type="danger"
              >查看活动商品详情</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="curPage"
        :page-size="pagesize"
        :pager-count="pagerCount"
        :total="tableData.length"
        background
        layout="total, prev, pager, next, jumper">
      </el-pagination>
    </div>

    <el-dialog title="添加新活动" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="活动编码" :label-width="formLabelWidth">
          <el-input v-model="form.activityCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="form.activityName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动开始时间" format="yyyy-MM-dd HH:mm:ss" :label-width="formLabelWidth">
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="Pick a date" v-model="form.startDate" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="活动结束时间" :label-width="formLabelWidth">
          <el-col :span="11">
            <el-date-picker type="datetime" placeholder="Pick a date" v-model="form.endDate" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"  @click="addactivity">提 交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        labelPosition: 'left' ,
        formInline: {
          activityName: '',
        },
        tableData:[],
        currentRow:1,
        dialogFormVisible: false,
        form: {
        },
        formLabelWidth: '120px',
        pagerCount:5,
        pagesize: 4,
        curPage: 1,
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      onSubmit() {
        let search={
          activityName:this.formInline.activityName
        }

        this.$axios({
          header:{
            "Content-Type": "application/json"
          },
          method:"post",
          url:"http://localhost:8080/api/activity/searchbyname",
          data:{
            activityName:search.activityName
          }
        }).then((res)=>{
          if(res.data.resultCode==="0"){
            this.$message({
              message: '查询成功',
              type: 'success'
            });
            this.tableData=res.data.activityList;
          }
        }).catch((error)=>{
          console.log(error);
        })
        console.log('submit!');
      },
      init:function() {
        this.$axios({
          headers:{
            "Content-Type": "application/json"
          },
          methods: "post",
          url:"http://localhost:8080/api/activity/allactivity",
          data:{}
        }).then((res)=>{
          console.log(res.data);
          if(res.data.resultCode==="0"){
            this.tableData= res.data.activityList;

          }
        }).catch((error)=>{
          console.log(error);
        })

      },
      addactivity: function() {
        this.dialogFormVisible = false
        let adduser={
          activityCode: this.form.activityCode,
          activityName: this.form.activityName,
          startDate: this.form.startDate,
          endDate:this.form.endDate
        }
        this.$axios({
          headers:{
            "Content-Type": "application/json"
          },
          method:"post",
          url:"http://localhost:8080/api/activity/addactivity",
          data:{
            activityCode: adduser.activityCode,
            activityName: adduser.activityName,
            // startDate: "2021-01-10 00:00:00",
            // endDate: "2021-01-11 00:00:00"
            startDate:adduser.startDate,
            endDate:adduser.endDate
          }
        }).then((res)=>{
          if(res.data.resultCode==="0"){
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.init()
          }else {
            this.$message({
              message: '添加失败',
              type: 'error'
            });
          }
        })
      }
    }
  }
</script>

<style scoped>
  .text {
    font-size: 30px;
    line-height: 46px;
    text-align: center;
  }
  .text1 {
    font-size: 20px;
    line-height: 30px;
    text-align: center;
  }
  .el-table .warning-row {
    background: oldlace;
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
  .box-card {
    margin-top: 10px;
    margin-left: 1px;
    margin-right: 1px;
    margin-bottom: 10px;
  }
</style>
